<template>
  <div class="basic-information">
    <el-form id="basicForm" :model="basicForm" label-width="85px" :rules="rulesBasicForm" ref="basicForm" size="small">
      <h3>基础信息</h3>
      <el-form-item  :label="rQueryObj.type === 'group' ? '分群名' : '标签名'" prop="name">
        <el-input
            type="text"
            placeholder="请输入名称"
            v-model="basicForm.name"
            maxlength="30"
            show-word-limit
        >
        </el-input>
      </el-form-item>
      <el-form-item   label="分类" prop="tagClassifyId" v-if="rQueryObj.type !== 'group'">
        <el-select
            v-model="basicForm.tagClassifyId"
            placeholder="请选择分类"
            filterable
            clearable
        >
          <el-option
              v-for="item in tagClassifyDataList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="公司部门" prop="orgCodes">
        <el-cascader
            v-model="basicForm.orgCodes"
            :options="orgCodesList"
            :props="{ label: 'orgName', value: 'orgCode', children: 'children', multiple: true, checkStrictly: true}"
            placeholder="请选择公司部门"
            @change="onChangeOrgCode"
            :show-all-levels=false
            clearable
        ></el-cascader>
      </el-form-item>
      <el-form-item label="备注" prop="remark">
        <el-input
            type="textarea"
            :rows="5"
            placeholder="请输入备注"
            maxlength="200"
            show-word-limit
            v-model="basicForm.remark">
        </el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: 'BasicInformation',
  props: {
    pDetails: {
      type: Object,
      default: () => {}
    },
    dataList: { // 数据列表
      type: Array,
      default: () => []
    },
    typeStr: { // 数据列表 高度
      type: Number,
      default: () => 0
    },
    rQueryObj: { // 路由参数
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      inputVisible: false,
      inputValue: '',
      basicForm: {
        id: '', // id
        name: '', // 标签名
        tagClassifyId: '', // 分类
        orgCodes: [], // 公司部门
        remark: '' // 备注
      },
      rulesBasicForm: {
        name: [{ required: true, message: '请输入标签名', trigger: 'blur' }],
        tagClassifyId: [{ required: true, message: '请选择分类', trigger: 'change' }],
        orgCodes: [{ required: true, message: '请选择公司部门', trigger: 'change' }]
      },
      orgCodesList: [],
      tagClassifyDataList: [],
      rQuery: {} // 路由参数
    }
  },
  watch: {
    $route: {
      handler: function (route) {
        // console.log(route.query.type)
        this.rQuery = route.query
        this.getTagClassifyDataList(route.query.type) // 标签分类列表查询接口(下拉框数据)
      },
      immediate: true
      // deep: true
    },
    pDetails: {
      handler: function (value) {
        this.basicForm.name = value.name // 标签名
        this.basicForm.tagClassifyId = value.tagClassifyId // 分类
        let orgCodesTemp = []
        if (value.resloveTagOrgResponses) {
          value.resloveTagOrgResponses.forEach(it => { orgCodesTemp.push(it.parentOrgCodeList) })
        }
        // if (this.rQuery.type === 'group') { item.groupDesc = item.groupDesc }
        if (this.rQuery.type === 'group' && value.orgCodeItem) { orgCodesTemp = [...value.orgCodeItem] }
        this.basicForm.orgCodes = orgCodesTemp
        this.basicForm.remark = value.remark // 备注
        if (value.id) { this.basicForm.id = value.id }
      },
      immediate: true
      // deep: true
    }
  },
  mounted () {
    this.$nextTick(_ => {})
  },
  created () {
    const rQuery = this.$route.query
    this.rQuery = rQuery
    this.getTagClassifyDataList(rQuery.type) // 标签分类列表查询接口(下拉框数据)
    this.getOrgTreeList()// 公司部门
  },
  methods: {
    output (row) {
      this.$emit('tableShowDetail', row)
      // console.log('onShowDetail - 查看', row)
    },
    onChangeOrgCode (data) {
      console.log(this.basicForm.orgCodes)
    },
    // 标签分类列表查询接口(下拉框数据)
    getTagClassifyDataList (type) {
      const rQuery = this.rQuery
      if (type === 'group') { return console.log(type) }
      let createWay
      if (rQuery.createWay) {
        createWay = rQuery.createWay
      } else if (rQuery.type === 'diy') {
        createWay = 1
      } else {
        console.log('获取分类参数有误！')
      }
      const params = { createWay }
      this.$api.tagClassifyDataList(params).then((res) => {
        if (res.code === 0) {
          const resultData = res.data.filter(it => it.status !== 3) // 状态（1-启用，2-暂停，3-回收站）
          // console.log(resultData)
          if (resultData.length === 0) { return this.$message.warning('需要添加分类！') }
          this.tagClassifyDataList = resultData
          // console.log(res)
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 公司部门
    getOrgTreeList (params) {
      // orgProcessOrgList
      const orgCodesList = JSON.parse(sessionStorage.getItem('orgCodeList'))
      if (orgCodesList && orgCodesList.length > 0) {
        this.orgCodesList = orgCodesList
        return
      }
      const paramsVersion = { 'request': { 'orgName': '', 'orgType': '' }, 'version': '' }
      this.$api.orgTreeList(paramsVersion).then((res) => {
        this.orgCodesList = res.data
        // 存本地缓存
        sessionStorage.setItem('orgCodeList', JSON.stringify(res.data))
      }).catch((err) => {
        console.log(err)
      })
    },
    // 表单规则验证
    submitForm (formName, type) {
      // debugger
      this.$refs['basicForm'].validate((valid) => {
        if (valid) {
          // 不为空把表单值传入父组件
          this.$emit('basicForm', this.basicForm, true)
        } else {
          console.log('error submit!!')
          this.$emit('basicForm', this.basicForm, false)
          return false
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.basic-information {
  #basicForm{
    .el-form-item{
      margin-bottom:10px;
      :deep(.el-form-item__label){
        width: 90px;
      }
      .el-form-item__content{
        .el-input, .el-select, .el-cascader, .el-textarea{
          width: 480px;
        }
      }
      :deep(.el-form-item__error){
        left: 100px;
        display: none;
      }
    }
  }
}

</style>
